/**
 * 项目公共样式文件
 */

@import './at-hack.scss';
@import './aisc-hack.scss';
@import './aone-common-hack.scss';
@import './monaco-hack.scss';
@import './github-markdown.scss';
@import './animate.scss';
@import './corp.scss';

/* stylelint-disable selector-max-id */
html,
body,
#container {
  background: #fff !important;
  -webkit-font-smoothing: antialiased;
}
// 解决at组件 badge在safari出现错乱样式
body {
  position: relative;
}
/* stylelint-enable selector-max-id */
// pre标签样式
pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  word-break: break-all;
  word-wrap: break-word;
  color: $gray-08;
  background-color: $gray-01;
  border: 1px solid $gray-03;
  border-radius: 3px;
  font-family: source-code-pro, 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo,
    Courier, monospace;
  white-space: pre-wrap;
  overflow-x: auto;
  &.well-pre {
    border: 1px solid $gray-03;
    background: $gray-01;
    border-radius: 0;
    color: $gray-08;
  }
}

// 等宽字体
.font-menlo {
  font-family: 'Menlo-Regular', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.tc {
  text-align: center;
}
.tr {
  text-align: right;
}
.tl {
  text-align: left;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.cursor {
  cursor: pointer;
}
.flex {
  display: flex;
}
.hide {
  display: none;
}
.block {
  display: block;
}
.m20 {
  margin: 20px;
}
.clearfix:after {
  content: ' ';
  display: block;
  line-height: 0;
  height: 0;
  visibility: hidden;
  clear: both;
}
.help-icon {
  margin-left: 10px;
  vertical-align: middle;
  display: inline-block;
}
.before-icon-text,
.display-inline-block {
  display: inline-block;
  vertical-align: middle;
}
a {
  cursor: pointer;
}

// 作为 trigger 的 icon
.icon-trigger {
  cursor: pointer;
}

// 单行文本裁剪
.one-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.binary-placeholder {
  font-size: 14px;
  color: $gray-06;
  text-align: center;
  padding: 10px;
}
// 通过...展开描述
.show-more-span {
  display: inline-block;
  cursor: pointer;
  margin-left: 8px;
  background: #fff;
  border: 1px solid $gray-03;
  color: $gray-06;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  .show-more-icon {
    margin-top: 1px;
  }
  &.bright {
    border: 1px solid #e8e8e8;
    height: 20px;
    line-height: 20px;
    .show-more-icon {
      color: #8b8b8b;
    }
    &:hover {
      background: #f7f7f7;
    }
  }
  &:hover {
    background: $gray-01;
    color: $gray-08;
  }
}

.no-mr-b {
  margin-bottom: 0 !important;
}

// 表格设置超出...样式
.table-cell-one-line {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// select组件下拉中有at-path时的hack
.at-path-select-popup,
.ellipsis-label-select-popup {
  &.small {
    width: 240px;
  }
  .next-menu-item-text {
    align-self: center;
    display: inline-block;
    max-width: 100%;
  }
}
// 首页中用at-path设置颜色
.project-list-item-title {
  .at-path {
    &-wrap-first,
    &-wrap-middle,
    &-separator {
      color: $gray-07;
    }
  }
}

// a标签无href，但是点击事件有,需要高亮
.no-href-with-click {
  color: $primary-brand;
  &:hover {
    color: $hover-brand;
  }
}

// 解决inline-block 3px问题
.skeleton-wapper > span {
  font-size: 0;
  display: inline-block;
  .react-loading-skeleton {
    border-radius: 2px;
  }
}
.react-loading-skeleton {
  vertical-align: middle;
}
.page-header-height .title-section {
  height: 42px;
}

.at-path-separator {
  width: auto !important;
}
